<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>品牌管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>


</head>
<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->
<div class="box-header with-border">
    <h3 class="box-title">品牌管理</h3>
</div>

<div class="box-body">

    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" data-toggle="modal"
                            data-target="#editModal"><i class="fa fa-file-o"></i> 新建
                    </button>
                    <button type="button" class="btn btn-default" title="删除" onclick="deleteallBrand()"><i
                            class="fa fa-trash-o"></i> 批量删除
                    </button>
                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i
                            class="fa fa-refresh"></i> 刷新
                    </button>
                </div>
            </div>
        </div>
        <div class="box-tools pull-right">
            <div class="has-feedback">

            </div>
        </div>
        <!--工具栏/-->

        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input id="selall" onclick="reversal()" type="checkbox" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">品牌ID</th>
                <th class="sorting">品牌名称</th>
                <th class="sorting">品牌首字母</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <!--复选框反转-->
            <script type="text/javascript">
                function reversal() {
                    $("[name=checkbox]").prop("checked", $("#selall").prop("checked"))
                }
            </script>
            <tbody id="brands">
            </tbody>
            <script type="text/javascript">

                //加载品牌内容
                $.ajax({
                    url: "/TbBrand/TbBrandshowall",
                    data: {},
                    type: "post",
                    dataType: "json",
                    async: false,
                    success: function (pm) {
                        var TbBrands = pm.data.rows;
                        var brandlist = '';
                        for (let i = 0; i < TbBrands.length; i++) {
                            brandlist += '<tr>'
                            brandlist += '<td><input type="checkbox" name="checkbox" value="' + TbBrands[i].id + '"></td>'
                            brandlist += '<td>' + TbBrands[i].id + '</td>'
                            brandlist += '<td>' + TbBrands[i].name + '</td>'
                            brandlist += '<td>' + TbBrands[i].firstChar + '</td>'
                            brandlist += '<td className="text-center">'
                            brandlist += '<button type="button" onclick="echo(' + TbBrands[i].id + ')" className="btn bg-olive btn-xs" data-toggle="modal"'
                            brandlist += 'data-target="#updateModal" >修改'
                            brandlist += '</button> '
                            brandlist += '<button type="button" onclick="deleteBrand(' + TbBrands[i].id + ')">删除</button>'
                            brandlist += '</td></tr>'
                        }
                        brandlist += '<tr><td colspan="5">'
                        brandlist += '<input type="button" value="首页" onclick="skip(0)"> '
                        brandlist += '<input type="button" value="上一页" onclick="skip(1)"> '
                        brandlist += '<span id="pageNum">' + pm.data.pageNum + '</span> / <span id="pages">' + pm.data.pages
                        brandlist += '</span> <input type="button" value="下一页" onclick="skip(2)"> '
                        brandlist += '<input type="button" value="末页" onclick="skip(3)"> '
                        brandlist += '</td></tr>'
                        $("#brands").html(brandlist);
                    },
                    error: function () {
                        alert("系统异常")
                    }
                })

                //换页逻辑
                function skip(pm) {
                    let pageNum = $("#pageNum").text();
                    let pages = $("#pages").text();
                    if (pm == 0) {
                        if (pageNum == 1) {
                            alert("已是首页")
                        } else {
                            $("#pageNum").text(1)
                            getall()
                        }
                    } else if (pm == 1) {
                        if (pageNum == 1) {
                            alert("已是第一页")
                        } else {
                            $("#pageNum").text(pageNum - 1)
                            getall()
                        }
                    } else if (pm == 2) {
                        if (pageNum == pages) {
                            alert("已是最后一页")
                        } else {
                            $("#pageNum").text(parseInt(pageNum) + 1)
                            getall()
                        }
                    } else if (pm == 3) {
                        if (pageNum == pages) {
                            alert("已是末页")
                        } else {
                            $("#pageNum").text(pages)
                            getall()
                        }
                    }
                }

                function getall() {
                    //加载换页后品牌内容
                    let pageNum = $("#pageNum").text();
                    let pages = $("#pages").text();
                    $.ajax({
                        url: "/TbBrand/TbBrandshowall",
                        data: {pageNum: pageNum, pages: pages},
                        type: "post",
                        dataType: "json",
                        async: false,
                        success: function (pm) {
                            var TbBrands = pm.data.rows;
                            var brandlist = '';
                            for (let i = 0; i < TbBrands.length; i++) {
                                brandlist += '<tr>'
                                brandlist += '<td><input type="checkbox" name="checkbox" value="' + TbBrands[i].id + '"></td>'
                                brandlist += '<td>' + TbBrands[i].id + '</td>'
                                brandlist += '<td>' + TbBrands[i].name + '</td>'
                                brandlist += '<td>' + TbBrands[i].firstChar + '</td>'
                                brandlist += '<td className="text-center">'
                                brandlist += '<button type="button" onclick="echo(' + TbBrands[i].id + ')" className="btn bg-olive btn-xs" data-toggle="modal"'
                                brandlist += 'data-target="#updateModal" >修改'
                                brandlist += '</button> '
                                brandlist += '<button type="button" onclick="deleteBrand(' + TbBrands[i].id + ')">删除</button>'
                                brandlist += '</td></tr>'
                            }
                            brandlist += '<tr><td colspan="5">'
                            brandlist += '<input type="button" value="首页" onclick="skip(0)"> '
                            brandlist += '<input type="button" value="上一页" onclick="skip(1)"> '
                            brandlist += '<span id="pageNum">' + pm.data.pageNum + '</span> / <span id="pages">' + pm.data.pages
                            brandlist += '</span> <input type="button" value="下一页" onclick="skip(2)"> '
                            brandlist += '<input type="button" value="末页" onclick="skip(3)"> '
                            brandlist += '</td></tr>'
                            $("#brands").html(brandlist);
                        },
                        error: function () {
                            alert("系统异常")
                        }
                    })
                }
            </script>
        </table>
        <!--数据列表/-->

    </div>
    <!-- 数据表格 /-->

</div>
<!-- /.box-body -->

<!-- 编辑窗口 增加-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">品牌编辑</h3>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-striped" width="800px">
                    <tr>
                        <td>品牌名称</td>
                        <td><input class="form-control" placeholder="品牌名称" name="name" id="name"></td>
                    </tr>
                    <tr>
                        <td>首字母</td>
                        <td><input class="form-control" placeholder="首字母" name="firstChar" id="firstChar"></td>
                    </tr>
                </table>
                <div class="modal-footer">
                    <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="addBrand()">保存
                    </button>
                    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!--编辑窗口 修改-->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updatemyModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="updatemyModalLabel">品牌编辑</h3>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-striped" width="800px">
                    <input class="form-control" placeholder="品牌名称" id="id" type="hidden">
                    <tr>
                        <td>品牌名称</td>
                        <td><input class="form-control" placeholder="品牌名称" id="echoname"></td>
                    </tr>
                    <tr>
                        <td>首字母</td>
                        <td><input class="form-control" placeholder="首字母" id="echofirstChar"></td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="updateBrand()">保存
                </button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    <!--添加品牌-->
    function addBrand() {
        var name = $("#name").val();
        var firstChar = $("#firstChar").val();
        if (name == '') {
            alert("品牌名称不能为空")
            return
        }
        if (firstChar == '' || firstChar.length != 1) {
            alert("首字母不能为空且长度不能大于1")
            return
        }
        $.ajax({
            url: "/TbBrand/addBrand",
            data: {name: name, firstChar: firstChar},
            type: "post",
            dataType: "json",
            async: false,
            success: function (pm) {
                alert(pm.message)
                getall()
            },
            error: function () {
                alert("系统异常")
            }
        })
    }

    //回显数据存放
    function echo(id) {
        $.ajax({
            url: "/TbBrand/showecho",
            data: {id: id},
            type: "post",
            dataType: "json",
            async: false,
            success: function (pm) {
                $("#id").val(pm.data.id)
                $("#echoname").val(pm.data.name)
                $("#echofirstChar").val(pm.data.firstChar)
            },
            error: function () {
                alert("系统异常")
            }
        })
    }

    //数据修改
    function updateBrand() {
        var name = $("#echoname").val();
        var firstChar = $("#echofirstChar").val();
        if (name == '') {
            alert("品牌名称不能为空")
            return
        }
        if (firstChar == '' || firstChar.length != 1) {
            alert("首字母不能为空且长度不能大于1")
            return
        }
        $.ajax({
            url: "/TbBrand/updateBrand",
            data: {id: $("#id").val(), name: name, firstChar: firstChar},
            type: "post",
            dataType: "json",
            async: false,
            success: function (pm) {
                alert(pm.message)
                getall()
            },
            error: function () {
                alert("系统异常")
            }
        })
    }

    //数据删除
    function deleteBrand(id) {
        if (confirm("你确定要删除吗?")) {
            $.ajax({
                url: "/TbBrand/deleteBrand",
                data: {id: id},
                type: "post",
                dataType: "json",
                async: false,
                success: function (pm) {
                    alert(pm.message)
                    getall()
                },
                error: function () {
                    alert("系统异常")
                }
            })
        }
    }

    //多条数据删除
    function deleteallBrand() {
        var ids = []
        $("[name=checkbox]").each(function (i, e) {
            if ($(e).prop("checked")) {
                ids.push($(e).val())
            }
        })
        if (ids == '') {
            alert("请先选择要删除的品牌")
            return
        }
        if (confirm("你确定要删除吗?")) {
            $.ajax({
                url: "/TbBrand/deleteallBrand",
                data: {ids: ids},
                type: "post",
                dataType: "json",
                async: false,
                success: function (pm) {
                    alert(pm.message)
                    getall()
                },
                error: function () {
                    alert("系统异常")
                }
            })
        }
    }
</script>

</body>
</html>